<template>
  <div class='header-container fadeIn noprint'>
    <div class='center clearfix'>
      <ul class='nav'>
        <li><router-link to="/main" :class="tabcount === 0 ? 'active' : ''">主页</a></router-link>
        <li><router-link to="/main/HomeOperate" :class="tabcount === 1 ? 'active' : ''">应用列表</router-link></li>
        <li><router-link to="/main/HomeClear" :class="tabcount === 2 ? 'active' : ''">运营数据查询</router-link></li>
        <li><router-link to="/main/HomeData" :class="tabcount === 3 ? 'active' : ''">账单查询</router-link></li>
        <li><router-link to="/main/HomeInfo" :class="tabcount === 4 ? 'active' : ''">账户管理</router-link></li>
      </ul>
      <div class="header-right header-right-xw">
       <div class="dropdown-box">
         <i class="icon-top-menu">{{name}}</i>
         <ul class="dropdown-list">
           <li>
             <router-link to="/main/HomeInfo">
               <span>
                 <i class="drop-icon-user"></i>
                 个人中心
               </span>
             </router-link>
           </li>
           <li>
             <a href="javascript:" @click="handleQuit">
               <span>
                 <i class="drop-icon-quit"></i>
                 退出登录
               </span>
             </a>
           </li>
         </ul>
       </div>
     </div>

    </div>

  </div>
</template>
<script>

export default {
  name: 'MainHeader',
  data() {
    return {
      name: this.$getLS('userName'),
      tabcount: 0,
    };
  },
  computed: {

  },
  mounted() {
    this.tabFun();
  },
  watch: {
    $route() {
      this.tabFun();
    },
  },
  methods: {
    // 顶部菜单焦点
    tabFun() {
      const path = this.$route.path;
      const arr = path.split('/');
      const item = arr[2];
      if (item === 'HomeOperate' || item === 'HomeChild' || item === 'HomeChildSetting') {
        this.tabcount = 1;
      } else if (item === 'HomeClear') {
        this.tabcount = 2;
      } else if (item === 'HomeData') {
        this.tabcount = 3;
      } else if (item === 'HomeInfo') {
        this.tabcount = 4;
      } else {
        this.tabcount = -1;
      }
    },
    handleQuit() {
      this.$removeLS();
      this.$router.push({
        path: '/',
      });
    },
  },
};
</script>

<style lang='scss' src='@/scss/global/main_header.scss' />
<style media='print'>
@media print {
.noprint { display: none; height: 0; overflow: hidden;}
}
</style>
